<template>
	<view class="albums">
		<scroll-view scrollY class="albums-scroll" @scrolltolower="reachBottom">
			<view class="albums-nav">
				<view class="albums-nav-title">
					专辑
				</view>
				<view class="albums-nav-traverse" v-for="(item,index) in albums" :key="index" @tap="golist(item.id)">
					<view class="albums-nav-traverse-img">
						<image :src="item.blurPicUrl"></image>
					</view>
					<view class="albums-nav-traverse-text">
						<view class="albums-nav-traverse-text-author">
							<text>{{item.name}}</text>
							<text style="color: #969696;" v-if="item.alias.length !== 0">({{item.alias[0]}})</text>
						</view>
						<view>
							<text style="color: #537982;font-size: 20rpx;">{{item.artists[0].name}}</text>
							<text style="margin-left: 10rpx;font-size: 20rpx;">{{item.publishTime | formatStr}}</text>
						</view>
					</view>



				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import moment from 'moment'
	export default {
		props: ['albums'],
		methods: {
			reachBottom() {
				this.$parent.$parent.$parent.$parent._getmylist()
			},
			golist(id) {
				uni.navigateTo({
					url: "/view/AlbumList/AlbumList?id=" + id
				})
				console.log(id);
			}
		},
		filters: {
			formatStr(value) {
				// var data = new data('YYYY-MM-DD')
				return moment(value).format('YYYY-MM-DD');
			},
		},

	}
</script>

<style lang="scss">
	.albums {
		padding: 0 15px;

		&-scroll {
			height: calc(100vh - 84px);
		}

		&-nav {
			display: flex;
			flex-direction: column;
			padding: 30rpx 0 0 0;
			box-sizing: border-box;
			border-bottom: 1px solid #E5E5E5;

			&-title {
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
				background-color: #fff;
				padding: 30rpx;
				font-weight: 600;
				font-size: 17px;
			}

			&-traverse {
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;

				&-img {
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 5px;
						display: flex;
						align-items: center;
					}
				}

				&-text {
					display: flex;
					flex-direction: column;
					margin-left: 10px;

					&-author {
						width: 210px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}

	}
</style>
